<%--
  Created by IntelliJ IDEA.
  User: 您的名字
  Version: 1.0
 --%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<html>
<head>
    <title>EasyUI CRUD 示例页面</title>
    <meta charset="UTF-8">
    <base href="<%=request.getContextPath()%>/">
    <!-- 引入 EasyUI 的默认主题样式 -->
    <link rel="stylesheet" type="text/css" href="static/js/easyui/themes/bootstrap/easyui.css">
    <!-- 引入 EasyUI 的图标样式 -->
    <link rel="stylesheet" type="text/css" href="static/js/easyui/themes/icon.css">
    <!-- 引入自定义的公共CSS -->
    <link rel="stylesheet" type="text/css" href="static/css/common.css"/>
    <!-- 引入 EasyUI 默认的 jQuery（无需单独引入 jQuery） -->
    <script src="static/js/easyui/jquery.min.js"></script>
    <!-- 引入 EasyUI 的核心 JS 文件 -->
    <script src="static/js/easyui/jquery.easyui.min.js"></script>
    <!-- 引入 EasyUI 的中文语言包 -->
    <script src="static/js/easyui/locale/easyui-lang-zh_CN.js"></script>
    <!-- 引入自定义的公共脚本 -->
    <script src="static/js/owner/common.js"></script>
    <!-- 引入自定义的公共脚本 -->
    <script src="static/js/owner/dataGrid.js"></script>
    <!-- 引入 moment.js 库，用于处理日期和时间 -->
    <script src="static/js/owner/moment.min.js"></script>
    <!-- daterangepicker 是一个日期范围选择插件，支持选择开始和结束日期 -->
    <link rel="stylesheet" href="static/css/daterangepicker.css">
    <!-- 引入 daterangepicker 的脚本文件 -->
    <script src="static/js/owner/daterangepicker.js"></script>
</head>
<style>
    /* 表单行样式 */
    .form-row {
        display: flex;
        align-items: center;
        margin-bottom: 15px;
        gap: 10px;
    }

    /*可以将每个表单项的标签和输入框放在同一个Flex容器中，使标签保持固定宽度，输入框自适应剩余空间*/
    .form-row label {
        flex: 0 0 100px; /* 固定标签宽度 */
        text-align: right;
    }

    /* 输入控件容器 */
    .input-container {
        flex: 1;
        min-width: 0; /* 防止内容溢出 */
    }

    /* 特殊行处理 */
    #previewContainer {
        display: none;
    }

    /* 按钮容器 */
    .button-group {
        display: flex;
        justify-content: flex-start;
        margin-top: auto; /* 底部对齐 */
        gap: 10px;
    }
</style>
<body>
<div class="form-row">
    <label>产品包名称:</label>
    <div class="input-container">
        <input id="productName" name="productName" type="text" value=""/>
    </div>
</div>
<div class="form-row">
    <label>产品包图:</label>
    <div class="input-container">
        <input id="file" class="easyui-filebox">
        <div id="previewContainer">
            <img id="previewImg" src="#" alt="图片预览" style="max-width: 200px; max-height: 150px;">
        </div>
    </div>
</div>
<div class="form-row">
    <label>关联项目:</label>
    <div class="input-container">
        <input id="project" name="project" class="easyui-combobox" data-options="
                            valueField:'id',textField:'text',
                            data:[
                                {id: '-1', text: '未入库'},
                                {id: '0', text: '未配置'},
                            ],
                            editable: false,
                            prompt: '请选择发货状态',
                            panelHeight:'auto'">
    </div>
</div>
<div class="form-row">
    <label>购买次数(次):</label>
    <div class="input-container">
        <input id="buyCount" name="buyCount" type="text" value=""/>
    </div>
</div>
<div class="form-row">
    <label>产品包总金额:</label>
    <div class="input-container">
        <input id="money" name="money" class="easyui-numberbox"/>
    </div>
</div>
<div class="button-group">
    <button onclick="nextTab()">下一步</button>
</div>
</body>

<!-- 定义页面脚本 -->
<script type="text/javascript">
    setTimeout(2000);

    // 验证必填字段
    const validateRules = [
        { selector: '#productName', msg: '产品包名称不能为空' },
        { selector: '#file', type: 'filebox', msg: '图片不能为空' },
        { selector: '#project', type: 'combobox', msg: '请选择关联项目' },
        { selector: '#buyCount', regex: /^\d+$/, msg: '购买次数需为正整数' },
        { selector: '#money', type: 'numberbox', msg: '金额格式错误' }
    ];

    $(function () {
        // 访问父页面全局变量
        $("#file").filebox({
            buttonText: '选择图片',
            prompt: '支持格式：jpg/png/gif',
            accept: 'image/*', // 浏览器原生过滤
            multiple: false, // 禁用多选
            onChange: previewImage,
        })
    })


    function previewImage() {
        const file = $("#file").filebox('files')[0];
        const preview = document.getElementById('previewImg');
        const container = document.getElementById('previewContainer');

        if (!(file && file.type.startsWith('image/'))) {
            container.style.display = 'none';
            $.messager.alert(' 错误','仅支持图片文件（JPG/PNG/GIF）');
            $(this).filebox('clear'); // 清空选择
            return false;
        }

        // 验证逻辑
        if (file && file.size  > 5 * 1024 * 1024) {
            $.messager.alert(' 错误','文件大小不能超过5MB');
            $(this).filebox('clear'); // 清空选择
            return false;
        }

        const reader = new FileReader();
        reader.onload = function (e) {
            preview.src = e.target.result;
            container.style.display = 'block';
        };
        reader.readAsDataURL(file);
    }

    // 通用验证函数
    function validateForm(rules) {
        for (const rule of rules) {
            let value;
            if (rule.type  === 'combobox') {
                value = $(rule.selector).combobox('getValue');
            } else if (rule.type  === 'numberbox') {
                value = $(rule.selector).numberbox('getValue');
            } else if (rule.type  === 'filebox') {
                value = $(rule.selector).filebox('files')[0];
            } else {
                value = $(rule.selector).val();
            }

            if (
                (rule.regex  && !rule.regex.test(value))  ||
                (!rule.regex  && !value)
            ) {
                $.messager.alert(' 警告', rule.msg);
                return false;
            }
        }
        return true;
    }

    function nextTab() {
        if (!validateForm(validateRules)) return;

        const formData = new FormData();

        // 添加普通字段
        formData.append('productName',  $('#productName').val());
        formData.append('project',  $('#project').combobox('getValue'));
        formData.append('buyCount',  $('#buyCount').val());
        formData.append('money',  $('#money').numberbox('getValue'));

        // 添加文件对象
        const file = $('#file').filebox('files')[0];
        if (file) {
            formData.append('productImage',  file);
        }

        $.ajax({
            url: 'tabSave',
            data: formData,
            type: 'post',
            contentType: false,  // 必须设置
            processData: false,  // 必须设置
            dataType: 'json',
            success: function (data) {
                $.messager.show({
                    title: '提示',
                    msg: '保存成功！',
                    timeout: 3000, // 自动关闭时间，单位毫秒
                    showType: 'slide' // 显示动画类型，如 'slide', 'fade', 'show'
                });

                window.parent.$tabs.tabs('enableTab', '设备详情');
                window.parent.$tabs.tabs('select', '设备详情');
            },
        })
        // 或通过标题切换（推荐方式，避免动态索引变化）
        window.parent.$tabs.tabs('disableTab', '基本信息');
    }
</script>
</body>
</html>
